<template>
  <div>
    <div class="backbtn" @click="backDemos()">返回</div>

    <div id="earth" class="earth"></div>
  </div>
</template>
<script>
import * as Cesium from 'cesium/Cesium';
import CesiumNaveigation from '@/components/navigation/CesiumNavigationUI.js';


export default {
  name: 'HelloWorld',
  data() {
    return {
      viewer: null,
      defaultRectangle: null
    };
  },
  mounted() {
    this.initEarth();

  },
  methods: {
    initEarth() {
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjA1ZjdiMi1jOTU0LTQxNGMtYWVlMi1mZjQ5YjNlYWZjOGIiLCJpZCI6MTAxOTksInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTU5MjYwOTd9.RQGIE__x7NQ7eSepPr0I4F20Nw72dGDkyCaPo9nRXRI';

      this.viewer = new Cesium.Viewer('earth', {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        homeButton: false, // homebutton
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        infoBox: false, // 是否显示点击要素之后显示的信息
        skyAtmosphere: false,//大气层
        shadows: true,
        terrainProvider: Cesium.createWorldTerrain(),

        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=f4d0553a23372a2f48c74851c7e46f4d',
          layer: 'tdt',
          minimumLevel: 0,
          maximumLevel: 18,
          style: 'default',
          tileMatrixSetID: 'w',
          format: 'image/jpeg',
        }),
      });
      // 夸张地形
      this.viewer.scene.globe.terrainExaggeration = 1.0;

      // 设置logo不可见
      this.viewer._cesiumWidget._creditContainer.style.display = 'none';
      this.defaultRectangle = Cesium.Rectangle.fromDegrees(
        75.0, // 东
        0.0, // 南
        140.0, // 西
        60.0, // 北
      );
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = this.defaultRectangle


    },
    backDemos() {
      this.$router.push({ name: 'index' })
    }

  },

};
</script>
<style scoped>
.earth {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.backbtn{
  position: absolute;
  left:20px;
  top:20px;
  width: 40px;
  height: 30px;
  background-color:#409EFF ;
  z-index:10;
  text-align: center;
  line-height: 30px;
  color: #fff;
  cursor: pointer;
  
}
</style>